<template>
  <view class="list">
    <view
      class="item"
      v-for="item of items"
      :key="item.id"
      @click.stop="handle(item)"
    >
      <view class="itemBox">
        <view class="checkBox" v-if="BatchProcessing">
          <checkbox-group>
            <checkbox class="checkbox" :checked="item.checked" color="#fff" />
          </checkbox-group>
        </view>

        <view class="img">
          <image :src="item.pic_url" mode="aspectFill"></image>
        </view>

        <view class="txt">
          <view class="title">{{ item.name }}</view>

          <view class="des">{{ index }}级分类</view>
        </view>

        <view class="icons" @click.stop="stop" v-if="!BatchProcessing">
          <i
            class="iconfont icon-add-select"
            @click="Emit.$emit('handleChecked', 'add', item)"
            v-if="index < 3"
          ></i>
          <i
            class="iconfont icon-ellipsis"
            @click="Emit.$emit('handleChecked', 'menu', item)"
          ></i>
        </view>
      </view>

      <view class="slot" v-if="item.children.length">
        <adminCategoryTree
          :index="index + 1"
          :items="item.children"
          :BatchProcessing="BatchProcessing"
        ></adminCategoryTree>
      </view>
    </view>
  </view>
</template>

<script>
import adminCategoryTree from "./page-list.vue";
export default {
  name: "adminCategoryTree",
  components: {
    adminCategoryTree,
  },

  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },

    index: {
      type: Number,
      default: 1,
    },

    BatchProcessing: {
      type: Boolean,
      default: false,
    },
  },

  computed: {},

  data() {
    return {};
  },

  methods: {
    handle(item) {
      if (this.BatchProcessing) {
        this.Emit.$emit("handleChecked", "checked", item);
        return;
      }
    },

    stop() {
      return false;
    },
  },
};
</script>

<style lang="less" scoped>
.item {
  background: #fff;
}

.itemBox {
  position: relative;
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 20rpx;

  .img {
    width: 80rpx;
    height: 80rpx;

    image {
      width: 100%;
      height: 100%;
      background: #f6f6f6;
      border-radius: 10rpx;
    }
  }

  .txt {
    flex: 1;
    overflow: hidden;
    margin: 0 24rpx;

    .title {
      font-size: 30rpx;
      color: #262626;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    .des {
      font-size: 24rpx;
      color: #8c8c8c;
    }
  }

  .icons {
    display: flex;
    align-items: center;
  }

  .iconfont {
    margin-left: 10rpx;
    color: #262626;
    font-size: 46rpx;
  }
}

.slot {
  margin-bottom: 12rpx;
  padding: 0 0 0 40rpx;
}
</style>
